<template>
  <div class="upload-file">
    <el-upload
      class="upload-file-uploader"
      :list-type="upload.listType"
      :disabled="upload.disabled"
      ref="upload"
      action=""
      :http-request="clickUpload"
      :limit="upload.limit"
      :accept="upload.accept"
      :auto-upload="upload.autoUpload"
      :before-upload="handleBeforeUpload"
      :on-change="handleUploadChange"
      :on-preview="handleUploadPreview"
      :on-exceed="handleExceed"
      :on-remove="handleDelete"
      :file-list="upload.fileList"
      :class="{ disabled: isMax }"
      multiple
    >
      <el-button size="mini" type="primary" :disabled="upload.disabled">选取文件</el-button>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible" :modal='false'>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from "@/utils/auth";
// import {preview,download} from "../../api/system/file";
import uploadFile from '@/api/file.js'

export default {
  props: {
    /* 获取上传文件限制个数 */
    limit: {
      type: Number,
      default: 1
    },
    /* 文件上传显示样式 text/picture/picture-card */
    listType:{
      type:String,
      default: "text"
    },
    /* 文件上传显示样式 text/picture/picture-card */
    accept:{
      type:String,
      default: null
    }
  },
  data() {
    return {
      dialogImageUrl: null,
      isMax: false,
      dialogVisible: false,
      upload: {
        /* 上传的地址 */
        // action: process.env.VUE_APP_BASE_API + "/web/upload",

        // 设置上传的请求头部
        // headers: { Authorization: "Bearer " + getToken() },
        // 上传的文件列表
        fileList: [],
        // 是否禁用自动上传
        autoUpload: false,
        /* 上传个数限制 */
        limit: this.limit,
        /* 查看禁用 */
        disabled: false,
        /* 文件上传显示样式 */
        listType: this.listType,

        hideUpload: false,
        /* 限制文件格式 */
        accept: this.accept
      },
    };
  },
  methods: {

    look(){
      console.log(this.upload.fileList)
    },

    /* 点击上传 */
    clickUpload(){
      if(this.upload.fileList == [] || this.upload.fileList == null || this.upload.fileList.length == 0){
        return this.$message.error("请选择上传图片")
      }
      else{
        for(var i = 0 ;i < this.upload.fileList.length; i++){
          let file = new FormData()
          file.append("file",this.upload.fileList[i].raw)

          this.$http.post('/web/upload',file).then( response => {
            console.log(response)
          })
          // uploadFile(file).then( res => {
          //   console.log(res)
          // })
        }
      }
    },

    /* 禁止显示空白框 */
    isMaxJudge(){
      this.isMax = true;
    },

    /* 显示空白框 */
    isMaxShowJudge(){
      this.isMax = true;
    },

    /* 设置禁用 */
    useDisabled(){
      this.upload.disabled = true;
    },

    /* 取消禁用 */
    unusedDisabled(){
      this.upload.disabled = false;
    },

    /* 清空 FileList */
    cleanFileList(){
      this.upload.fileList = [];
      this.isMax = false
    },

    /* 添加 FileLlist */
    addFileList(val){
      this.upload.fileList = val;
      if(this.upload.fileList.length == this.limit){
        this.isMax = true
      }
    },

    /* 上传文件前校验大小 */
    handleBeforeUpload(file) {
      if(file.size > 1048576 * 100){
        this.$message.error(`上传文件超过100MB`);
        return false;
      }
    },

    /* 文件上传改变操作 */
    handleUploadChange(file,fileList){
      this.upload.fileList.push(file);
    },

    /* 点击图片放大展示 */
    handleUploadPreview(file){
      console.log(JSON.stringify(file))
      if(file.name.endsWith('.png') || file.name.endsWith('.gif') || file.name.endsWith('.jpg') || file.name.endsWith('.jpeg') ){
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },

    /* 文件上传超出限制个数 */
    handleExceed() {
      this.$message.error(`只允许上传` + this.limit + `个文件`);
    },

    /* 上传失败 */
    handleUploadError(err,file,fileList) {
      this.$message.error("上传失败, 请重试");
      if (fileList.length >= this.limit) {
        this.isMax = true;
      } else {
        this.isMax = false;
      }
    },

    /* 禁止显示删除按钮 */
    handleBeforeRemove(){
      this.upload.disabled = true;
    },

    /* 显示删除按钮 */
    handleBeforeRemoveShow(){
      this.upload.disabled = false;
    },

    /* 删除文件 */
    handleDelete(index) {
      this.upload.fileList.splice(index, 1);
      if (this.upload.fileList.length < this.limit) {
        this.isMax = false;
      }
      this.$emit("input", '');
    },
    /** 上传文件 */
    submit() {
      this.$refs.upload.submit()
      // this.$emit("submit", '666')
    }
  },
};
</script>
<!--npm install -g sass-->
<!--<style scoped lang="scss">-->
<style>
.upload-file-uploader {
  margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
  border: 1px solid #e4e7ed;
  line-height: 2;
  margin-bottom: 10px;
  position: relative;
}
.upload-file-list .ele-upload-list__item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
}
.ele-upload-list__item-content-action .el-link {
  margin-right: 10px;
}
::v-deep .disabled .el-upload--picture-card {
  display: none;
}
::v-deep .el-upload-list__item {
  transition: none !important;
}
</style>
